<template>
	<view class="container">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block v-slot:content>手机号登录</block>
		</cu-custom>
		<view class="contents-white ">
			<view class="input-boxs flex text-center justify-center">
				<view style="margin-top: 136rpx;">
					<view class="boxs-logo padding">
						<image class="logo image_175" src="../../static/logo.jpg"></image>
						<view class="text-black text-bold text-black margin-top-xs">源商户</view>
					</view>
					<view class=" padding-xs">
						<!-- <cu-nav :list="tabarList" @action="handleSwitchLogin"></cu-nav> -->
						<view>
							<form v-if="current == 0">
								<view class="cu-form-group  margin-top-xs">
									<view class="title text-black">账户</view>
									<input v-model="fromParams.username" placeholder="请输入账户" name="input" />
								</view>
								<view class="cu-form-group ">
									<view class="title text-black">密码</view>
									<input v-model="fromParams.password" password placeholder="请输入密码" name="input" />
								</view>
							</form>
							<form v-else>
								<view class="cu-form-group">
									<view class="title text-black">手机号码</view>
									<input v-model="fromParams.phone" placeholder="请输入手机号码" name="input" />
									<view class="cu-capsule radius">
										<view class="cu-tag bg-menu ">+86</view>
									</view>
								</view>
								<view class="cu-form-group">
									<view class="title text-black">验证码</view>
									<input v-model="fromParams.verifyCode" placeholder="请输入验证码" name="input" />
									<button v-if="countdown == 0" @click="getCode"
										class="cu-btn bg-menu shadow">验证码</button>
									<button v-else class="cu-btn bg-gray shadow">{{ countdown }}秒</button>
								</view>
							</form>
							<view class="flex flex-direction padding"><button
									class="cu-btn round lg text-white text-size-32 bg-menu"
									@click="handleLogin">立即登录</button></view>

							<view class="flex justify-center margin-top">
								<view>
									<view class="text-size-22">暂未入驻?立即去入驻源社区吧</view>
									<view @click="handleEnter">
										<view class="cuIcon-brandfill size-60"></view>
										<view class="text-menu-color">立即入驻</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import cuNav from '@/components/cu-nav.vue';
	import cuCustom from '@/components/cu-custom.vue';
	import { useSettingStore } from '@/stores/index';
	import { login, userRole, verifyCode, userInfo } from '@/common/api/login';
	const setting = useSettingStore();
	const tabarList = [
		{
			id: 0,
			type: 'image',
			name: '账户密码'
		},
		{
			id: 1,
			type: 'image',
			name: '验证码'
		}
	];
	const fromParams = ref({
		password: '',
		username: '',
		verifyCode: '',
		loginMethod: 'password',
		phone: '',
		type:3
	});
	const current = ref(0);
	const handleSwitchLogin = (e : any) => {
		current.value = e;
	};
	const handleEnter=()=>{
		uni.navigateTo({
			url: '/manage/enter/enter'
		});
	}
	const countdown = ref(0);
	const getCode = async (e : any) => {
		if (countdown.value != 60) {
			return;
		}
		const res : any = await verifyCode({ phone: fromParams.value.phone });
		if (res.code == 1000) {
			countdown.value = 60;
			let timer = setInterval(() => {
				if (countdown.value > 0) {
					countdown.value--;
				} else {
					clearInterval(timer);
				}
			}, 1000);
		}
	};


	const setRole = (roleInfo : any) => {
		if (roleInfo) {
			uni.setStorage({
				key: 'role',
				data: roleInfo.value,
				success() {
					setting.roleType = roleInfo.value
				}
			})

			uni.navigateTo({
				url: roleInfo.path
			});
		}
	}
	const isServer = async (roleKeys : any) => {
		if (roleKeys.indexOf('express') == -1) {
			return false
		}
		const roleRes : any = await userRole(setting.userInfo.id)
		if (roleRes.code == 1000) {
			return roleRes.data.indexOf(20) != -1
		} else {
			return false
		}
	}

	const onUser2 = async () => {
		const res : any = await userInfo({});
		if (res.code == 1000) {
			setting.userInfo = res.data;
		}
	};
	const handleLogin = () => {
		if (fromParams.value.verifyCode.length > 0) {
			fromParams.value.loginMethod = 'phone';
			fromParams.value.type = 3;
		} else {
			fromParams.value.loginMethod = 'password';
			fromParams.value.type = 3;
			uni.setStorage({
				key: 'account',
				data: JSON.stringify(fromParams.value)
			})
		}
		login(fromParams.value).then((res : any) => {
			setting.onLogin(res.data.token);
			onUser2();
		});
	};
	onShow(() => {
		uni.getStorage({
			key: 'account',
			success(res) {
				if (res.errMsg == "getStorage:ok") {
					fromParams.value = JSON.parse(res.data)
				}
			}
		})
	});
</script>

<style scoped lang="scss">
	.container {
		background-color: #FFFFFF;
	}

	.contents-white {
		height: calc(100% - 60px);
	}

	.login-txt {
		color: #999999;
		font-size: 28rpx;
	}

	.login-bg {
		background: #4287FC !important;
		height: 80rpx;
		width: 600rpx;
	}

	.login-bot {
		position: fixed;
		bottom: 100rpx;
		left: 0;
		width: 100%;
	}

	.login-bot view {
		text-align: center;
		color: #999999;
		font-size: 22rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.login-bot text {
		color: #4287FC;
	}

	.login-bot checkbox {
		width: 50rpx;
		height: 50rpx;
	}
</style>